<template>
  <div class="headers">
    <checked-title :title="title">
      <template #right>
        <div class="deg">
          <i @click="tabsClick">
            <img
              alt
              class="img"
              src="@/assets/images/shouyetab.png"
            />
          </i>
        </div>
      </template>
    </checked-title>
    <div
      id="benyueanjian"
      ref="echarts"
      style="height: 270px;"
    ></div>
  </div>
</template>

<script>
import { HomeDb } from '@/api'
let chartByaj = null;

export default {
  components: {},
  data() {
    return {
      dataList: [],
      type: 1, //1是街办   2是部门
      timer: null
    }
  },
  computed: {
    title() {
      return this.type == 1 ? '本月案件承办情况(街乡)' : '本月案件承办情况(部门)'
    }
  },
  mounted() {
    this.getJiebanList()
    // window.addEventListener('resize', () => {
    //   this.$nextTick(() => {
    //     // 避免多图同时加载卡顿
    //     echarts.init(this.$refs.echarts).resize()
    //   })
    // })

    // 计时器 每60秒刷新一次
    this.setTimer()
  },
  beforeDestroy() {
    this.desHander();
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    setTimer() {
      let timer = null
      timer && clearInterval(timer)
      timer = setInterval(() => {
        this.tabsClick()
      }, 60000)
    },
    getJiebanList() {
      HomeDb.getHomeStreetOrder({ type: this.type }).then(res => {
        this.desHander()
        this.initChart(res.data)
      })
    },
    tabsClick() {
      this.type = this.type == 2 ? 1 : 2
      this.getJiebanList()
    },
    desHander() {
      let myChart = echarts.init(this.$refs.echarts)
      myChart.dispose()
    },
    initChart(datalist) {
      let XaxioName = [] //名字数组
      let aswcNumList = [] //按时完结量
      let slNumList = [] //案件受理量
      let hfNumList = [] //案件回访量
      let hfmylList = [] //回访满意率
      let aswjlList = [] //按时完结率
      datalist.forEach(item => {
        // if (item.aswcNum !== 0 && item.slNum !== 0 && item.hfNum !== 0) {
          XaxioName.push(item.street)
          aswcNumList.push(item.aswcNum)
          slNumList.push(item.slNum)
          hfNumList.push(item.hfNum)
          hfmylList.push(item.hfmyl)
          aswjlList.push(item.aswjl)
        // }
      })
      const colors = ['#5470C6', '#EE2167', '#91CC75', '#EE32FF', '#FFCC1F']

      let colorsList = ['#FFCC1F', '#EE32FF']
      // 定义换色数组
      let colorList = [
        ['#00C95F', '#BDFFE7'],
        ['#366FFF', '#AECFFF'],
        ['#EE2167', '#EFBACD']
      ]

      chartByaj = echarts.init(document.getElementById('benyueanjian'))
      let option = {
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },
            lineStyle: {
              width: 0
            }
          }
        },
        grid: {
          // right: '10%',
          left: '5%', // 固定左边刻度宽度
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#fff'
          },
          data: ['案件受理量', '按时完结量', '案件回访量', '回访满意率', '按时完结率']
        },
        dataZoom: {
          show: false,
          startValue: 0,
          endValue: 11
        },
        xAxis: [
          {
            type: 'category',
            show: true,
            boundaryGap: true,
            axisLabel: {
              color: '#fff',
              interval: 0,
              rotate: '20',
              textStyle: {
                color: '#9EADC9'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false,
              alignWithLabel: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(4, 187, 255, 1)'
              }
            },
            data: XaxioName
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            name: '单位: %',
            scale: true,
            position: 'right',
            alignTicks: true,
            max: 100,
            textStyle: {
              color: '#fff'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              formatter: 100
            },
            // 分割线
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(4, 187, 255, 0.2)'
              }
            }
          },
          {
            type: 'value',
            name: '单位： 件',
            scale: true,
            textStyle: {
              color: '#fff'
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              formatter: 1000
            },
            // 分割线
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: '#E9E9E9'
              }
            }
          }
        ],
        series: [
          {
            name: '案件受理量',
            type: 'bar',
            yAxisIndex: 1,
            data: slNumList,
            barMaxWidth: 6,
            itemStyle: {
              normal: {
                barBorderRadius: [6, 6, 0, 0],
                color: function (params) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorList[1][0]
                    },
                    {
                      offset: 1,
                      color: colorList[1][1]
                    }
                  ])
                }
              }
            }
          },
          {
            name: '按时完结量',
            type: 'bar',
            yAxisIndex: 1,
            data: aswcNumList,
            barMaxWidth: 6,
            itemStyle: {
              normal: {
                barBorderRadius: [6, 6, 0, 0],
                color: function (params) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorList[2][0]
                    },
                    {
                      offset: 1,
                      color: colorList[2][1]
                    }
                  ])
                }
              }
            }
          },
          {
            name: '案件回访量',
            type: 'bar',
            itemWidth: 5,
            yAxisIndex: 1,
            data: hfNumList,
            barMaxWidth: 6,
            itemStyle: {
              normal: {
                barBorderRadius: [6, 6, 0, 0],
                color: function (params) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorList[0][0]
                    },
                    {
                      offset: 1,
                      color: colorList[0][1]
                    }
                  ])
                }
              }
            }
          },

          //曲线
          {
            name: '回访满意率',
            type: 'line',
            data: hfmylList,
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 4,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#EE32FF'
                }
              ])
            },
            itemStyle: {
              normal: {
                color: colors[3],
                borderColor: colorsList[1]
              }
            }
          },
          {
            name: '按时完结率',
            type: 'line',
            data: aswjlList,
            symbolSize: 1,
            ssymbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 4,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#FFCC1F'
                }
              ])
            },
            itemStyle: {
              normal: {
                color: colors[4],
                borderColor: colorsList[2]
              }
            }
          }
        ]
      }

      chartByaj.setOption(option, true)
      var startNumber = 0
      // 有多少条数据
      var xAxisDatalen = XaxioName.length
      if (xAxisDatalen > 12) {
        //街乡数量12，显示一屏
        // len的值,可以根据你的数量量设置,不要超过xAxisDatalen的值,不然不会动
        var len = 11
        this.timer && clearInterval(this.timer)
        this.timer = setInterval(function () {
          if (startNumber === xAxisDatalen - len) {
            startNumber = 0
          }
          chartByaj.dispatchAction({
            type: 'dataZoom',
            startValue: startNumber,
            endValue: startNumber + len
          })
          startNumber++
        }, 2000)
      } else {
        clearInterval(this.timer)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.headers {
  position: relative;
}

.el-icon-sort {
  color: #00fbf0;
  font-size: 20px;
}

.deg {
  width: 20px;
  height: 20px;
  cursor: pointer;
  // margin-top: -80px;
  // margin-left: 700px;
  position: absolute;
  right: 30px;
  top: 15px;
  .img {
    width: 18px;
    height: 18px;
  }
}
</style>
